<template>
  <van-nav-bar
      title="个人资料"
      left-text="返回"
      left-arrow
      @click-left="goMyView"
  />


  <div>当前学生：{{ userInfo.userName }}</div>
  <div>学生学号：{{ userInfo.studentId }}</div>

  <div class="user-data-body" style="display: flex; justify-content: center;">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="50px"
             label-position="left" style="width: 350px">

      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入姓名" :maxlength="10" show-word-limit clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="formData.sex" placeholder="请输入性别" :maxlength="2" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="nation">
        <el-input v-model="formData.nation" placeholder="请输入民族" :maxlength="4" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="日期" prop="birthday">
        <el-date-picker v-model="formData.birthday" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                        :style="{width: '100%'}" placeholder="请选择日期选择" clearable></el-date-picker>
      </el-form-item>
      <el-form-item label="籍贯" prop="location">
        <el-input v-model="formData.location" placeholder="请输入籍贯" :maxlength="255" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="系别" prop="dept">
        <el-input v-model="formData.dept" placeholder="请输入系别" :maxlength="255" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="专业" prop="subject">
        <el-input v-model="formData.subject" placeholder="请输入专业" :maxlength="255" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label="年级" prop="grade">
        <el-input v-model="formData.grade" placeholder="请输入年级" :maxlength="26" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item size="large" >

        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>

      </el-form-item>

    </el-form>
  </div>
</template>
<script>

import {NavBar} from 'vant';
import {showFailToast, showSuccessToast} from "vant";
import router from "@/router";

export default {

  props: [],
  data() {
    return {
      userInfo: {
        studentId: -1,
        userName: -1,
      },

      formData: {
        account: -1,
        name: '',
        sex: undefined,
        nation: undefined,
        birthday: null,
        location: undefined,
        dept: undefined,
        subject: undefined,
        grade: undefined,
      },
      rules: {
        name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '请输入性别',
          trigger: 'blur'
        }],
        nation: [{
          required: true,
          message: '请输入民族',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '请输入生日',
          trigger: 'change'
        }],
        location: [{
          required: true,
          message: '请输入籍贯',
          trigger: 'blur'
        }],
        dept: [{
          required: true,
          message: '请输入系别',
          trigger: 'blur'
        }],
        subject: [{
          required: true,
          message: '请输入专业',
          trigger: 'blur'
        }],
        grade: [{
          required: true,
          message: '请输入年级',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
    this.getInfo();
  },
  methods: {

    // goSetting() {
    //
    //   router.push({ name: 'course_select' })
    // },


    goMyView() {
      router.push({name: 'my'})
    },


    // 获取用户详细信息
    getInfo() {
      this.axios.get('/getInfo', {
        headers: {
          'Authorization': 'Bearer ' + sessionStorage.token
        }
      }).then(res => {
        this.userInfo.userName = res.data.user.userName;
        this.userInfo.studentId = res.data.user.studentId;
      }).catch(error => {
        // 请求失败，弹出提示消息
        showFailToast('登录失效，请重新登录！');

      });
    },


    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) {
          return
        }
        if (this.userInfo.userName === -1) {
          return;
        }

        this.formData.account = this.userInfo.userName;
        // 提交表单
        this.axios.post("/user/save", this.formData).then((res) => {

          if (res.data.code === 200) {
            showFailToast('保存成功，数据已上传！');
            this.userInfo.studentID = res.data.student.id;
          } else {
            showFailToast('保存失败！');
          }
        }).catch(function () {
          showFailToast(res.data.code);
        });

      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style lang="less">

.user-data-body {
}


.van-nav-bar {
  background: #92adce;
}

.van-nav-bar__title{
}

.van-nav-bar__text {
  color: #505050;
}

.van-nav-bar .van-icon {
  color: #505050;
}


</style>



